<template>
  <el-form v-if="selectedEl.obj" label-position="top">
    <el-form-item label="标题">
      <el-input v-model="selectedEl.obj.elementName"></el-input>
    </el-form-item>

    <el-form-item label="默认值">
      <el-input type="textarea" :disabled="!showItemEl('默认值')" v-model="selectedElVal"></el-input>
    </el-form-item>

    <el-form-item label="placeholder" v-if="showItemEl('placeholder')">
      <el-input v-model="selectedEl.obj.placeholder"></el-input>
    </el-form-item>

    <el-form-item label="排版">
      <el-radio v-model="selectedEl.obj.elementWidth" label="100%">单列</el-radio>
      <el-radio v-model="selectedEl.obj.elementWidth" label="50%">双列</el-radio>
    </el-form-item>

    <el-form-item label="行数" v-if="selectedEl.ele === 'textarea'">
      <el-input-number v-model="selectedEl.obj.rows" :min="1" :max="10" :step="1"></el-input-number>
    </el-form-item>

    <el-form-item label="单选框配置" v-if="selectedEl.ele == 'radio'">
      <div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
        <el-radio style="margin-bottom:5px" v-model="selectedEl.obj.value" :label="item.value">
          <el-input v-model="item.value"></el-input>
        </el-radio>
        <i class="el-icon-remove-outline removeIcon" style="margin-left:10px" @click="removeItem('radio', i)"></i>
      </div>
      <el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
    </el-form-item>

    <el-form-item label="多选框配置" v-if="selectedEl.ele == 'checkBox'">
      <el-checkbox-group v-model="selectedEl.obj.value">
        <div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
          <el-checkbox style="margin-bottom:5px" :label="item.value">
            <el-input v-model="item.value"></el-input>
          </el-checkbox>
          <i class="el-icon-remove-outline removeIcon" style="margin-left:10px" @click="removeItem('checkBox', i)"></i>
        </div>
      </el-checkbox-group>

      <el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
    </el-form-item>

    <el-form-item label="单选配置" v-if="selectedEl.ele == 'select'">
      <div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
        <el-radio style="margin-bottom:5px" v-model="selectedEl.obj.value" :label="item.value">
          <el-input v-model="item.value"></el-input>
        </el-radio>
        <i class="el-icon-remove-outline removeIcon" style="margin-left:10px" @click="removeItem('radio', i)"></i>
      </div>
      <el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
    </el-form-item>

    <el-form-item label="多选配置" v-if="selectedEl.ele == 'selectBox'">
      <el-checkbox-group v-model="selectedEl.obj.value">
        <div v-for="(item, i) in selectedEl.obj.detailList" :key="i">
          <el-checkbox style="margin-bottom:5px" :label="item.value">
            <el-input v-model="item.value"></el-input>
          </el-checkbox>
          <i class="el-icon-remove-outline removeIcon" style="margin-left:10px" @click="removeItem('checkBox', i)"></i>
        </div>
      </el-checkbox-group>

      <el-button type="primary" size="mini" round @click="addItem('radio', selectedEl.obj.detailList.length)">添加</el-button>
    </el-form-item>

    <el-form-item label="时间格式" v-if="selectedEl.ele == 'datePicker'">
      <el-select v-model="selectedEl.obj.dateType" @change="dateChange" placeholder="请选择">
        <el-option v-for="(item, index) in time_type" :key="index" :label="item.format" :value="item.type"></el-option>
      </el-select>
    </el-form-item>

    <!-- <el-form-item label="是否必填">
      <el-radio-group v-model="selectedEl.obj.required">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item> -->

    <el-form-item label="校验规则">
      <el-select v-model="selectedEl.obj.rules" multiple placeholder="请选择">
        <el-option v-for="(item, index) in rules" :key="index" :label="item.message" :value="JSON.stringify(item)"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="启用状态">
      <el-radio-group v-model="selectedEl.obj.status">
        <el-radio :label="true">启用</el-radio>
        <el-radio :label="false">停用</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
import format from 'date-fns/format'

export default {
  data() {
    return {
      from_rules: [
        { required: true, message: "必须的", trigger: "blur" },
        { min: 3, max: 5, message: "3到5个字符", trigger: "blur", elType: ["input"] },
        { type: "date", message: "日期类型", trigger: "change" },
        { type: "url", message: "url类型", trigger: "change" },
        { type: "email", message: "电子邮件", trigger: "change" },
        { type: "hex", message: "十六进制", trigger: "change" },
        { type: "enum", enum: ["aaa", "bbb"], message: "存在于枚举中", trigger: "blur" },
        { type: "integer", message: "必须是数字类型和一个整数", trigger: "blur" },
        // { type: "string", message: "必须是字符串类型", trigger: "blur" },
        // { type: "number", message: "必须是数字类型", trigger: "blur" },
        // { type: "boolean", message: "必须是布尔类型", trigger: "change" },
        // { type: "method", message: "必须是方法类型", trigger: "blur" },
        // { type: "regexp", message: "必须是regexp类型", trigger: "blur" },
        // { type: "float", message: "必须是数字类型和浮点数", trigger: "blur" },
        // { type: "any", message: "可以是任何类型", trigger: "blur" },
        // { type: "object", message: "必须是对象类型", trigger: "blur" },
        // {type: "array",message: "必须是一个数组",trigger: "blur"},
      ],
      time_type: [
        { format: 'yyyy-MM-dd HH:mm:ss', type: 'datetime' },
        { format: 'yyyy-MM-dd', type: 'date' },
      ]
    };
  },
  props: ["selectedEl"],
  methods: {
    removeItem(type, index) {
      const [delItem] = this.selectedEl.obj.detailList.splice(index, 1);
      if (!this.selectedEl.obj.value) return;
      if (typeof this.selectedEl.obj.value == "object") {
        for (let i = 0, len = this.selectedEl.obj.value.length; i < len; i++) {
          if (this.selectedEl.obj.value[i] === delItem.value) {
            this.selectedEl.obj.value.splice(i, 1);
            break;
          }
        }
      } else {
        this.selectedEl.obj.value === delItem.value &&
          (this.selectedEl.obj.value = "");
      }
    },
    addItem(type) {
      this.selectedEl.obj.key += 1;
      this.selectedEl.obj.detailList.push({
        key: this.selectedEl.obj.key,
        value: "选项框" + this.selectedEl.obj.key,
        label: "选项框" + this.selectedEl.obj.key,
      });
    },
    dateChange(e) {
      this.selectedEl.obj.value = e === 'datetime'
        ? format(new Date(this.selectedEl.obj.value),'yyyy-MM-dd HH:mm:ss')
        : format(new Date(this.selectedEl.obj.value),'yyyy-MM-dd')
    }
  },
  computed: {
    // 是否显示某字段配置
    showItemEl(type) {
      return function (type) {
        switch (type) {
          case "placeholder":
            return (
              this.selectedEl.ele === "input" ||
              this.selectedEl.ele === "datePicker" ||
              this.selectedEl.ele === "select" ||
              this.selectedEl.ele === "selectBox" ||
              this.selectedEl.ele === "textarea" 

            );
          case "默认值":
            return (
              this.selectedEl.ele !== "radio" &&
              this.selectedEl.ele !== "checkBox" &&
              this.selectedEl.ele !== "select" &&
              this.selectedEl.ele !== "selectBox" &&
              this.selectedEl.ele !== "datePicker" &&
              this.selectedEl.ele !== "image"
            );
        }
      };
    },
    // 元素绑定值
    selectedElVal: {
      get: function () {
        const val = this.selectedEl.obj.value;
        if (typeof val == "object" || typeof val == "boolean") {
          return JSON.stringify(val);
        } else {
          return val;
        }
      },
      set: function (newValue) {
        this.selectedEl.obj.value = newValue;
      },
    },
    // 过滤元素绑定的校验规则
    rules() {
      return this.from_rules.filter((v) => {
        if (v.elType) {
          return v.elType.includes(this.selectedEl.obj.elementType);
        } else {
          return true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
